<template lang="html">
	<div class="body_wrap">	
	    <div class="banner">
	    	<img src="/img/banner_05.png" alt="" />
	    </div>
	    		
		<div class="title_wrap about">			
			<div>
				<div class="title">{{$t('message.companyProfile')}}</div>
				<div class="sub">Company Profile</div>
			</div>		
			<div>
				<div class="content">
					{{currentIntroduce}}
				</div>
			</div>
			<div class="about_bg">
				<img src="/img/company_img.png" alt="" />
			</div>			
		</div>	 
		

		<div class="title_wrap about">			
			<div>
				<div class="title">{{$t('message.contactUs')}}</div>
				<div class="sub">Contact Us</div>
			</div>			
			<div>
				<div class="content">
					<div>
						{{info.companyName}} 
					</div>
					<div>联系人:{{info.contactPerson}} </div>
					<div>联系电话: {{info.contactPhone}}</div>
					<div>联系地址:{{info.contactArea}}</div>
				</div>
			</div>
		
		</div>
		
		
		<div class="title_wrap about">			
			<div>
				<div class="title">{{$t('message.leavingMessage')}}</div>
				<div class="sub">Leaving a message</div>
			</div>					
		</div>
		<div>
			<van-form @submit="onSubmit">
			  <van-field
			    v-model="form.contactName"
			    required
			    :label="$t('message.contacts')"
			    :placeholder="$t('message.contactsplaceholder')"
			    :rules="[{ required: true, message: ' ' }]"
			  />
			  <van-field 
			    v-model="form.contactMobile"			    
			    type="tel"
			    required
			    :label="$t('message.telephone')"
			    :placeholder="$t('message.telephoneplaceholder')"
			    :rules="[{ required: true, message: ' ' }]"
			  />
			  <van-field
			    v-model="form.message"
			    :label="$t('message.content')"
			    type="textarea"
			    rows="2"			    
			    required
			    :placeholder="$t('message.contentplaceholder')"
			    :rules="[{ required: true, message: ' ' }]"
			  />				  
             <div style="margin-top: 16px;padding: 0 15px;">
             	<van-button type="info"  block  :loading="sumbitLoading" >{{$t('message.submitBtn')}}</van-button>
             </div>
			</van-form>
			
		</div>		
		
	</div>
</template>                                                                

<script>
export default {
	name: 'news',

	data() {
	    return {
	    	sumbitLoading:false,
			introduce:{zh:'',jap:'',en:''},
			currentIntroduce:'',
			info:{},
            form:{
            	contactMobile:'',
            	contactName:'',
            	message:''
            }
	    }  
	},
	watch:{
		 '$i18n.locale'(newValue) {
		 	this.currentIntroduce=this.introduce[newValue]
		 }
	},	
	methods: {	
    	init(){
    		this.$Axios.Get(this.$baseUrl+'contact_info/list').then(res => {
    			this.info=res[0]
    			this.introduce={
    				zh:res[0].introduce,
    				jap:res[0].jpnIntroduce,
    				en:res[0].engIntroduce
    			}
    		    this.currentIntroduce=this.introduce[this.$i18n.locale]
    		})
    	},
    	onSubmit(val){
           this.sumbitLoading=true
           
		   this.$Axios.Post(this.$baseUrl+'message/save',this.form).then(res => {
			  this.images = res.records
			  this.sumbitLoading=false
	          this.form={contactMobile:'',contactName:'',message:''}
			  this.$toast({
				  message: '操作成功',
				  position: 'bottom',
			  });	          
		   })           
    	}
	},
	mounted() {	
	    this.init()
	}
  }
</script>

<style lang="scss" scoped="">
.banner{
	img{width: 100%;display: block;}
}
.body_wrap{padding-bottom: 120px;}
.title_wrap{margin-top: 5px;padding: 20px;position: relative;
  .title{font-size: 24px;color: #0099FF;}
  .sub{font-size: 12px;color: #999999;}  
}
.about{
  .content{font-size: 12px;color: #999999;margin-top: 10px;min-height: 144px;}
  .about_bg{position: absolute;top: 10%;right: 0;width: 100%;display: flex;justify-content: flex-end;height: 100%;
    img{width: 70%;opacity: 0.15;height: 85%;};	
  }
}

</style>



